<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Quick Start - Layui</title>
    <link href="../layui/css/layui.css" rel="stylesheet">
    <link href="../style/index.css?y=145" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>

<body>
    <!-- HTML Content -->
    <div class="layui-fluid" >
        <blockquote class="layui-elem-quote " style="border-left: 5px solid #ff5722; ">
            注意事项
        </blockquote>
        <div class="easy-layout easy-layout-center-right">
            <div class="easy-layout-right">
                <div class="easy-card">
                    <div class="easy-card-header">排座设置</div>
                    <div class="easy-card-body">
                        <form class="layui-form " action="">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">课桌排数</label>
                                    <div class="layui-input-inline" style="width:120px;">
                                        <input type="number" name="deskRow" id="deskRow" placeholder="请输入课桌排数" autocomplete="off" class="layui-input" min="1" max="10" step="1" value="8" lay-affix="number" lay-verify="required">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">课桌列数</label>
                                    <div class="layui-input-inline" style="width:120px;">
                                        <input type="number" name="deskCol" dirname="deskCol" placeholder="请输入课桌列数" autocomplete="off" class="layui-input" min="1" max="10" step="1" value="8" lay-affix="number" lay-verify="required">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label"></label>
                                    <div class="layui-input-inline">
                                        <button type="submit" class="layui-btn" lay-submit lay-filter="seat-chart-setting">课桌设置</button>
                                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <hr>
                        <form class="layui-form " action="">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">排删除</label>
                                    <div class="layui-input-inline" style="width:194px;">
                                        <input type="number" name="price_min" placeholder="" autocomplete="off" class="layui-input" min="0" step="1">

                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <button type="submit" class="layui-btn layui-bg-red" lay-submit lay-filter="seat-chart-setting">行删除</button>

                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">列删除</label>
                                    <div class="layui-input-inline" style="width:194px;">
                                        <input type="number" name="price_min" placeholder="" autocomplete="off" class="layui-input" min="0" step="1" lay-affix="number">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <button type="submit" class="layui-btn layui-bg-red" lay-submit lay-filter="seat-chart-setting">列删除</button>

                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">排对调</label>
                                    <div class="layui-input-inline" style="width: 80px;">
                                        <input type="number" name="price_min" placeholder="" autocomplete="off" class="layui-input" min="0" step="1" lay-affix="number">
                                    </div>
                                    <div class="layui-form-mid">  <img style="width:14px;" src="../images/replacement.svg" /></div>
                                    <div class="layui-input-inline" style="width: 80px;">
                                        <input type="number" name="price_max" placeholder="" autocomplete="off" class="layui-input" min="0" step="1" lay-affix="number">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <button type="submit" class="layui-btn layui-bg-blue" lay-submit lay-filter="seat-chart-setting">排对调</button>

                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">列对调</label>
                                    <div class="layui-input-inline" style="width: 80px;">
                                        <input type="number" name="price_min" placeholder="" autocomplete="off" class="layui-input" min="0" step="1" lay-affix="number">
                                    </div>
                                    <div class="layui-form-mid">
                                        <img style="width:14px;" src="../images/replacement.svg" />
                                    </div>
                                    <div class="layui-input-inline" style="width: 80px;">
                                        <input type="number" name="price_max" placeholder="" autocomplete="off" class="layui-input" min="0" step="1" lay-affix="number">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <button type="submit" class="layui-btn layui-bg-blue" lay-submit lay-filter="seat-chart-setting">列对调</button>

                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label"></label>
                                <div class="layui-inline">
                                    <div class="layui-btn-container">
                                        <button class="layui-btn " lay-event="getCheckData">梅花间排位</button>
                                        <button class="layui-btn" lay-event="getCheckData">“之”字型排位</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <hr>
                        <div style="width:100%;text-align:center;font-size:18px;font-weight:600;">名单列表（可拖拽到座位区）</div>

                        <form class="layui-form">
                            <div style="width:100%;">  <button type="button" class="layui-btn layui-btn-radius" style="width:100%;" id="importStudents">导入Excel名单</button></div>
                            <div style="color:#01aaed;text-align:center;cursor:pointer;" id="downloadTpl">下载名单模板</div>
                        </form>

                        <div class="student-container" id="studentContainer" style="box-shadow: 1px 2px 1px 1px rgba(0,0,0,.05);padding:10px 0px;">
                            <div class="student male student-hide" draggable="true">
                                <div class="student-card">
                                    <div class="student-card-body">曾某某</div>
                                    <div class="student-card-footer">
                                        <div class="student-sex">男</div>
                                        <div class="student-height">172cm</div>
                                    </div>
                                </div>
                            </div>
                            <div class="student female">
                                <div class="student-card">
                                    <div class="student-card-body">曾某某</div>
                                    <div class="student-card-footer">
                                        <div class="student-sex">男</div>
                                        <div class="student-height">172cm</div>
                                    </div>
                                </div>
                            </div>
                            <div class="student female">
                                <div class="student-card">
                                    <div class="student-card-body">曾某某</div>
                                    <div class="student-card-footer">
                                        <div class="student-sex">男</div>
                                        <div class="student-height">172cm</div>
                                    </div>
                                </div>
                            </div>
                            <div class="student female">
                                <div class="student-card">
                                    <div class="student-card-body">曾某某</div>
                                    <div class="student-card-footer">
                                        <div class="student-sex">男</div>
                                        <div class="student-height">172cm</div>
                                    </div>
                                </div>
                            </div>
                            <div class="student female">
                                <div class="student-card">
                                    <div class="student-card-body">曾某某</div>
                                    <div class="student-card-footer">
                                        <div class="student-sex">男</div>
                                        <div class="student-height">172cm</div>
                                    </div>
                                </div>
                            </div>
                            <div class="student female">
                                <div class="student-card">
                                    <div class="student-card-body">曾某某</div>
                                    <div class="student-card-footer">
                                        <div class="student-sex">男</div>
                                        <div class="student-height">172cm</div>
                                    </div>
                                </div>
                            </div>
                            <div class="student female">
                                <div class="student-card">
                                    <div class="student-card-body">曾某某</div>
                                    <div class="student-card-footer">
                                        <div class="student-sex">男</div>
                                        <div class="student-height">172cm</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="easy-layout-center">
                <div class="easy-card">
                    <div class="easy-card-header">


                        座位表
                    </div>
                    <div class="easy-card-body">

                        <div class="seating-chart-container ">
                     
                            <div class="seating-chart">
                                <div class="teacher-podium-container">
                                    <div class="teacher-podium">讲台</div>
                                </div>
                                <div class="seating-chart-label-container">
                                    <div class="seating-chart-label male">
                                        <span class="seating-chart-label-flag"></span><span class="seating-chart-label-title">女</span>
                                    </div>
                                    <div class="seating-chart-label female">
                                        <span class="seating-chart-label-flag"></span><span class="seating-chart-label-title">男</span>
                                    </div>
                                    <div class="seating-chart-label empty">
                                        <span class="seating-chart-label-flag"></span><span class="seating-chart-label-title">空</span>
                                    </div>
                                </div>

                                <div class="seat-container" id="seat-container">
                                    <div class="seat-col">
                                        <div class="seat" draggable="true">
                                            <div class="seat-card">
                                                <div class="seat-locked-state"><i class="layui-icon layui-icon-lock"></i></div>
                                                <div class="seat-card-header">
                                                    <div class="seat-number">1-3</div>

                                                </div>
                                                <div class="seat-card-body">
                                                    空
                                                </div>
                                            </div>
                                        </div>
                                        <div class="seat male seat-assigned" draggable="true">
                                            <div class="seat-card">
                                                <div class="seat-locked-state"><i class="layui-icon layui-icon-lock"></i></div>
                                                <div class="seat-card-header">
                                                    <div class="seat-number">1-3</div>
                                                </div>
                                                <div class="seat-card-body">
                                                    曾某某
                                                </div>
                                                <div class="seat-card-footer">
                                                    <div class="student-sex">男</div>
                                                    <div class="student-height">172cm</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="seat female seat-assigned">
                                            <div class="seat-card" draggable="true">
                                                <div class="seat-locked-state"><i class="layui-icon layui-icon-lock"></i></div>
                                                <div class="seat-card-header">
                                                    <div class="seat-number">1-3</div>
                                                </div>
                                                <div class="seat-card-body">
                                                    曾某某
                                                </div>
                                                <div class="seat-card-footer">
                                                    <div class="student-sex">男</div>
                                                    <div class="student-height">172cm</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="seat-col">
                                        <div class="seat">
                                            <div class="seat-card" draggable="true">
                                                <div class="seat-card-header">
                                                    <div class="seat-number">2-1</div>
                                                    <div class="seat-locked-state"><i class="layui-icon layui-icon-lock"></i></div>
                                                </div>
                                                <div class="seat-card-body">
                                                    空
                                                </div>
                                            </div>
                                        </div>
                                        <div class="seat seat-locked">
                                            <div class="seat-card" draggable="true">
                                                <div class="seat-locked-state"><i class="layui-icon layui-icon-lock"></i></div>
                                                <div class="seat-card-header">
                                                    <div class="seat-number">2-2</div>
                                                </div>
                                                <div class="seat-card-body">
                                                    空
                                                </div>
                                            </div>
                                        </div>
                                        <div class="seat male seat-assigned " data-row="1" data-col="1" data-name="女性">
                                            <div class="seat-card" draggable="true">
                                                <div class="seat-locked-state"><i class="layui-icon layui-icon-lock"></i></div>
                                                <div class="seat-card-header">
                                                    <div class="seat-number">2-3</div>
                                                </div>
                                                <div class="seat-card-body">
                                                    曾某某
                                                </div>
                                                <div class="seat-card-footer">
                                                    <div class="student-sex">男</div>
                                                    <div class="student-height">172cm</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="seat female seat-assigned " data-row="1" data-col="1" data-name="女性">
                                            <div class="seat-card" draggable="true">
                                                <div class="seat-locked-state"><i class="layui-icon layui-icon-lock"></i></div>
                                                <div class="seat-card-header">
                                                    <div class="seat-number">2-4</div>
                                                </div>
                                                <div class="seat-card-body">
                                                    曾某某
                                                </div>
                                                <div class="seat-card-footer">
                                                    <div class="student-sex">男</div>
                                                    <div class="student-height">172cm</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>

                        </div>
                        <div>
                            <h1>注意事项</h1>
                            <div><i class="layui-icon layui-icon-lock"></i>测试说明</div>
                            <div><i class="layui-icon layui-icon-lock"></i>测试说明</div>
                            <div><i class="layui-icon layui-icon-lock"></i>测试说明</div>
                            <div><i class="layui-icon layui-icon-lock"></i>测试说明</div>
                        </div>
                    </div>
                </div>


            </div>

        </div>






    </div>
    <script id="student-tpl" type="text/html">
        <!--学生模板-->
        <div class="student {{(d.row > 0 || d.col > 0)?"student-hide":""}} {{d.sex=="男"?"male":"female"}}" id="STU_{{d.id}}">
            <div class="student-card" data-id="{{d.id}}" data-name="{{d.name}}" data-sex="{{d.sex}}" data-height="{{d.height}}" draggable="true">
                <div class="student-card-body">{{d.name}}</div>
                <div class="student-card-footer">
                    <div class="student-sex">{{d.sex}}</div>
                    <div class="student-height">{{d.height}}cm</div>
                </div>
            </div>
        </div>
    </script>
    <script id="seat-tpl" type="text/html">
        <!--座位模板-->
        {{# if(d.student!=null && d.student != undefined){}}
        <div class="seat seat-assigned   {{d.locked==true?"seat-locked":""}}  {{d.student.sex=="男"?"male":"female"}}" idid="SEAT_R_{{d.row}}_C_{{d.col}}" data-row="{{d.row}}" data-col="{{d.col}}" 
             data-id="{{d.student.id}}" data-name="{{d.student.name}}" data-sex="{{d.student.sex}}" data-height=" {{d.student.height}}">
            <div class="seat-card"   {{d.locked==true?"":"draggable='true'"}}  >
                <div class="seat-card-header">
                    <div class="seat-number">{{d.col}}-{{d.row}}</div>
                    <div class="seat-locked-state">
                        <i class="layui-icon layui-icon-lock"></i>
                        <i class="layui-icon layui-icon-disabled"></i>
                    </div>
                </div>
                <div class="seat-card-body">
                    {{d.student.name}}
                </div>
                <div class="seat-card-footer">
                    <div class="student-sex">{{d.student.sex}}</div>
                    <div class="student-height">{{d.student.height}}cm</div>
                </div>
            </div>
        </div>
        {{# }else{ }}
        <div class="seat" id="SEAT_R_{{d.row}}_C_{{d.col}}" data-row="{{d.row}}" data-col="{{d.col}}">
            <div class="seat-card">
                <div class="seat-card-header">
                    <div class="seat-number">{{d.col}}-{{d.row}}</div>
                    <div class="seat-locked-state">
                        <i class="layui-icon layui-icon-lock"></i>
                        <i class="layui-icon layui-icon-disabled"></i>
                    </div>
                </div>
                <div class="seat-card-body">
                    空
                </div>
            </div>
        </div>
        {{# } }}
    </script>
    <script id="seat-col-tpl" type="text/html">
        <!--初始化座位列表-->
        <div class="seat-col" id="{{"SeatCol_"+ d.col}}">
            {{# d.items.forEach(function(item, index) { }}
            {{# if(item.student==null||item.student==undefined){}}
            <div class="seat" id="SEAT_R_{{item.row}}_C_{{item.col}}" data-row="{{item.row}}" data-col="{{item.col}}">
                <div class="seat-card">
                    <div class="seat-card-header">
                        <div class="seat-number">{{item.col}}-{{item.row}}</div>
                        <div class="seat-locked-state">
                            <i class="layui-icon layui-icon-lock"></i>
                            <i class="layui-icon layui-icon-disabled"></i>
                        </div>
                    </div>
                    <div class="seat-card-body">
                        空
                    </div>
                </div>
            </div>
            {{# }else{ }}
            <div class="seat seat-assigned    {{d.locked==true?"seat-locked":""}} {{item.student.sex=="男"?"male":"female"}}" id="SEAT_R_{{item.row}}_C_{{item.col}}" data-row="{{item.row}}" data-col="{{item.col}}"
                 data-id="{{item.student.id}}" data-name="{{item.student.name}}" data-sex="{{item.student.sex}}" data-height=" {{item.student.height}}">
                <div class="seat-card" {{d.locked==true?"":"draggable='true'"}}>
                    <div class="seat-card-header">
                        <div class="seat-number">{{item.col}}-{{item.row}}</div>
                        <div class="seat-locked-state">
                            <i class="layui-icon layui-icon-lock"></i>
                            <i class="layui-icon layui-icon-disabled"></i>
                        </div>
                    </div>
                    <div class="seat-card-body">
                        {{item.student.name}}
                    </div>
                    <div class="seat-card-footer">
                        <div class="student-sex">{{item.student.sex}}</div>
                        <div class="student-height">{{item.student.height}}cm</div>
                    </div>
                </div>
            </div>
            {{# } }}
            {{# }); }}
        </div>
    </script>
    <script src="../layui/layui.js"></script>
    <script src="../lib/JsonSQL/jsonsql-0.1.js"></script>
    <script src="../modules/index.js?y=1257"></script>
</body>

</html>